<template>
    <div class="wrapper">
        <div class="cont">
            <div class="left-cont">
                <div class="ls-tit">
                    <h3>站长推荐</h3>
                    <div class="clear"></div>
                </div>
                <el-card class="recommend-card" shadow="hover">
                    <div class="ls-box">
                        <div class="shu-box" v-for="novel in novels" :key="novel.title">
                            <div @click="details(novel)">
                                <p class="p-img">
                                    <a :href="novel.link" :title="novel.title">
                                        <img :src="novel.imgUrl" :alt="novel.title">
                                    </a>
                                </p>
                                <p class="line20 title"><a :href="novel.link" :title="novel.title">{{ novel.title }}</a></p>
                                <p class="line20 author">作者：{{ novel.author }}</p>
                                <p class="line20 update-time">{{ novel.updateTime }}</p>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            novels: [
                {
                    title: '神印王座II皓月当空',
                    link: 'http://www.biqule.net/book/59265/',
                    imgUrl: 'http://www.biqule.net/files/article/image/59/59263/59263s.jpg',
                    author: '唐家三少',
                    updateTime: '3-9 16:33'
                }

            ]
        };
    },
    created() {
        this.getNovel();
    },
    methods: {
        getNovel() {
            this.$request.get('/novels').then(res => {
                this.novels = res;
            });
        },
        details(row) {
            this.$router.push({path: '/details', query: {row: JSON.stringify(row)}});
        },
    }
};
</script>

<style scoped>
/* Container and Layout Styles */
.wrapper {
    padding: 20px;
    background-color: #f8f8f8;
}

.cont {
    display: flex;
    justify-content: center;
    background-color: #f4f4f4;
    padding: 20px;
}

.left-cont {
    flex: 1;
}

/* Title Styles */
.ls-tit h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
}

/* Card Styles */
.recommend-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #fff;
}

.ls-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

/* Novel Box Styles */
.shu-box {
    flex: 1 1 220px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.shu-box:hover {
    transform: translateY(-10px);
}

/* Image Styles */
.p-img {
    text-align: center;
    margin-bottom: 15px;
}

.p-img img {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 5px;
}

/* Text Styles */
.line20 {
    line-height: 1.4;
    margin: 5px 0;
}

.line20.title {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
}

.line20.author,
.line20.update-time {
    font-size: 0.9em;
    color: #666;
}

.clear {
    clear: both;
}

/* Footer Styles */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}
</style>